<template>
<div>
  <div>
    <button type="button" @click="random()" class="zhtt-btn">测试修改输入框的值</button>
  </div>
  <div style="margin:8px;">
    <select style="width:300px;height:30px;"
            v-model="selectedUser"
            @change="onSelectUser">
      <option>张三</option>
      <option>李四</option>
      <option>王五</option>
    </select>
  </div>
  <input
      class="zhtt-input"
      type="text"
      :value="modelValue"
      @input="emitValue">
</div>
</template>

<script>
export default {
  data(){
    return {
      selectedUser:''
    }
  },
  props: {
    modelValue: String,
    modelModifiers: {
      default: () => ({})
    },
    modelValueModifiers: {
      default: () => ({})
    }
  },
  created() {
    console.log('modelModifiers：',this.modelModifiers); // { capitalize: true }
    console.log('modelValueModifiers：',this.modelValueModifiers); // { capitalize: true }
  },
  emits: ['update:modelValue'],
  methods: {
    onSelectUser(v){
      console.log(this.selectedUser);
      this.$emit('update:modelValue', '新值：'+this.selectedUser);
    },
    random(){
      this.$emit('update:modelValue', '新值：'+Math.random());
    },
    emitValue(e) {
      let value = e.target.value
      if (this.modelModifiers.capitalize || this.modelValueModifiers.capitalize) {
        value = value.toUpperCase();
      }
      this.$emit('update:modelValue', value)
    }
  }
}
</script>